<template>
  <div class="QRCodeUrlPoP">
    <el-dialog
      v-model="props.QrCodeVisible"
      title="扫描二维码查看活动"
      width="300"
      :before-close="handleClose"
    >
      <!-- <div id="imgCode"></div> -->
      <div class="text_center">
        <qrcode-vue :value="props.QrCodeUrl" :size="size" level="H" style="margin:0 auto"></qrcode-vue>
      </div>
    </el-dialog>
  </div>
</template>
  
  <script lang="ts" setup name="QRCodeUrlPoP">
import { toRefs, defineProps, defineEmits } from "vue";
// import QRCode from "qrcodejs2-fix";-
// import QrcodeVue from "qrcode.vue";
import QrcodeVue from "qrcode.vue";
components: {
  QrcodeVue;
}

const emit = defineEmits(["close"]);
const props = defineProps({
  QrCodeVisible: Boolean,
  QrCodeUrl: String,
});
const value = props.QrCodeUrl; //传入的值，要求是字符串,需要将对象进行转换
const size = 200; //二维码大小
// let { QrCodeVisible, QrCodeUrl } = toRefs(props);
// const handleGenerate = () => {
//   // 采集二维码：路径
//   const url = `${QrCodeUrl}`;
//   // 获取二维码码 div 上的 id
//   const qrCodeElement = document.getElementById("imgCode");
//   if (qrCodeElement) {
//     qrCodeElement.innerHTML = "";
//     new QRCode(qrCodeElement, {
//       text: url,
//       width: 100, // 二维码宽度
//       height: 100, // 二维码高度
//     });
//   }
// };
// handleGenerate();
const handleClose = (done: () => void) => {
  emit("close");
};
</script>
  